<template>
  <view class="container">

    <view class="fixed-header">
      <!-- 顶部 Header -->
      <Header :header-data="headerData" />
      <!-- 定位栏 -->
      <view class="switch-location" @click="navigateToSelectedCity">
        <uni-icons type="location-filled" size="18" style="margin-right: 8rpx;"></uni-icons>
        <text>{{ selectedLocation }}</text>
        <uni-icons type="down" size="12" style="margin-left: 8rpx;"></uni-icons>
      </view>
    </view>

    <view class="u-demo-block" style="margin-bottom: 30rpx;">
      <u-swiper :list="bannerData" previousMargin="30" nextMargin="30" circular :autoplay="true" radius="10"
        height="130"></u-swiper>
    </view>
    <!-- 功能按钮区 -->
    <view class="function-container">
      <view class="function-row">
        <view class="func-item green" @click="navigateToOrderDetail"
          :style="{ 'background-image': `url(${getFullImageUrl('/newindex/dindan.png')})`, 'background-size': 'contain', 'background-repeat': 'no-repeat', 'background-position': 'center' }">
        </view>
        <view class="func-item blue" @click="navigateToChat"
          :style="{ 'background-image': `url(${getFullImageUrl('/newindex/xuqiu.png')})`, 'background-size': 'contain', 'background-repeat': 'no-repeat', 'background-position': 'center' }">
        </view>
        <view class="func-item red" @click="navigateToEmergency"
          :style="{ 'background-image': `url(${getFullImageUrl('/newindex/jinji.png')})`, 'background-size': 'contain', 'background-repeat': 'no-repeat', 'background-position': 'center' }">
        </view>
      </view>
      <view class="function-row">
        <view style="width: 130%;height: 208rpx;padding: 0 0rpx;">
          <view class="func-item ai-demand" @click="navigateToAiDemand"
            :style="{ 'background-image': `url(${getFullImageUrl('/newindex/aifabu2.png')})`, 'background-size': 'contain', 'background-repeat': 'no-repeat', 'background-position': 'center' }">
          </view>
        </view>
      </view>
    </view>

    <!-- 接单大厅 -->
    <view class="hall-header">
      <view class="filter-column">
        <text>接单大厅</text>
      </view>
      <!-- 综合筛选 - 竖向布局 -->
      <view class="filter-bar">
        <view class="filter-item" :class="{ active: activeMenu === 'filter' }" @click="toggleMenu('filter')">
          <text class="filter-text" :class="{ active: activeMenu === 'filter' }">{{ getFilterText() }}</text>
          <uni-icons :type="activeMenu === 'filter' ? 'up' : 'down'" size="11"
            :color="activeMenu === 'filter' ? '#0E1C37' : '#888B9A'"></uni-icons>

          <!-- 综合筛选下拉菜单 - 竖向布局 -->
          <view class="dropdown-menu" v-if="activeMenu === 'filter'">
            <!-- 时间筛选 -->
            <view class="filter-group">
              <view class="filter-group-title">时间</view>
              <view class="filter-options">
                <view @click.stop="selectFilter('time', 'latest')"
                  :class="currentFilter.type === 'time' && currentFilter.value === 'latest' ? 'active' : ''">
                  <text>最新发布</text>
                  <image v-if="currentFilter.type === 'time' && currentFilter.value === 'latest'" class="check-icon"
                    src="/static/image/gou.png" mode="aspectFit"></image>
                </view>
                <view @click.stop="selectFilter('time', 'earliest')"
                  :class="currentFilter.type === 'time' && currentFilter.value === 'earliest' ? 'active' : ''">
                  <text>最早发布</text>
                  <image v-if="currentFilter.type === 'time' && currentFilter.value === 'earliest'" class="check-icon"
                    src="/static/image/gou.png" mode="aspectFit"></image>
                </view>
              </view>
            </view>

            <!-- 距离筛选 -->
            <view class="filter-group">
              <view class="filter-group-title">距离</view>
              <view class="filter-options">
                <view @click.stop="selectFilter('distance', 'nearest')"
                  :class="currentFilter.type === 'distance' && currentFilter.value === 'nearest' ? 'active' : ''">
                  <text>距离最近</text>
                  <image v-if="currentFilter.type === 'distance' && currentFilter.value === 'nearest'"
                    class="check-icon" src="/static/image/gou.png" mode="aspectFit"></image>
                </view>
                <view @click.stop="selectFilter('distance', 'unlimited')"
                  :class="currentFilter.type === 'distance' && currentFilter.value === 'unlimited' ? 'active' : ''">
                  <text>距离不限</text>
                  <image v-if="currentFilter.type === 'distance' && currentFilter.value === 'unlimited'"
                    class="check-icon" src="/static/image/gou.png" mode="aspectFit"></image>
                </view>
              </view>
            </view>

            <!-- 酬金筛选 -->
            <view class="filter-group">
              <view class="filter-group-title">酬金</view>
              <view class="filter-options">
                <view @click.stop="selectFilter('salary', 'unlimited')"
                  :class="currentFilter.type === 'salary' && currentFilter.value === 'unlimited' ? 'active' : ''">
                  <text>酬金不限</text>
                  <image v-if="currentFilter.type === 'salary' && currentFilter.value === 'unlimited'"
                    class="check-icon" src="/static/image/gou.png" mode="aspectFit"></image>
                </view>
                <view @click.stop="selectFilter('salary', 'highest')"
                  :class="currentFilter.type === 'salary' && currentFilter.value === 'highest' ? 'active' : ''">
                  <text>酬金最高</text>
                  <image v-if="currentFilter.type === 'salary' && currentFilter.value === 'highest'" class="check-icon"
                    src="/static/image/gou.png" mode="aspectFit"></image>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <SignIn />
    <EmergencyModal />
    <!-- 订单列表 -->
    <view class="job-list" v-if="jobs.length > 0 || isLoading">
      <view class="job-item" v-for="(job, index) in jobs" :key="index">
        <view class="job-info">
          <image :src="job.icon || '/static/image/logo.jpg'" class="job-icon"></image>
          <view class="job-details">
            <view class="job-title">
              <text>{{ job.title }}</text>
              <text class="salary">{{ job.salary }}</text>
            </view>
            <view class="order-info">
              <view class="info-row">
                <text class="people-info" v-if="job.people_num">人数：{{ job.people_num }}</text>
                <text class="people-info" v-if="job.start_time">时间：{{ job.start_time }} -- {{ job.end_time }}</text>
                <view class="people-info" v-if="job.person_req">需求：{{ job.person_req }}</view>
                <view class="people-info" v-if="job.skill_desc">技能：{{ job.skill_desc }}</view>
              </view>
            </view>
            <view class="location-container">
              <view>
                <view class="location">
                  <text>地址：</text>
                  <text>{{ job.address }}</text>
                </view>
                <view class="distance">
                  <text>距离：</text>
                  <text>{{ job.distance }}</text>
                </view>
              </view>
              <view class="button">
                <view class="apply-btn" :class="{ 'applied': job.isApplied }" @click="handleApply(job)"
                  :disabled="job.isApplied">{{ job.isApplied ? '已经报名' : '立即报名' }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="no-more" v-if="!hasMore && jobs.length > 0">
        <text>已经到底啦~</text>
      </view>
    </view>

    <!-- 无订单 -->
    <view v-if="jobs.length === 0 && !isLoading" class="no-order-container">
      <image src="/static/image/logo.jpg" class="empty-icon"></image>
      <text class="no-order-text">当前暂无订单</text>
    </view>
    <view v-if="showApplySuccess" class="apply-success-modal">
      <text>报名成功，等待雇主确认</text>
    </view>

    <!-- 认证弹窗 -->
    <authWin ref="authWinRef" @close="closeAuthWin"></authWin>
    <!-- 订单成功弹窗 -->
    <OrderSuccessModal :visible="showSuccessModal" :order="successOrderData" @close="closeSuccessModal"
      @order-success="handleOrderSuccess" />
  </view>
</template>

<script src="./index.js"></script>
<style lang="scss" src="./index.scss"></style>
